<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-1.11.0.min.js"></script>
    <link rel="stylesheet" href="css/bootstrap.css">
</head>
<style>
    .tr_odd
    {
        background: red;
    }
    .tr_even
    {
        background: yellow;
    }
</style>

<body>
<center>
    <h1>学生管理系统</h1>
    <input id="ss" width="100px" height="20px">
    <button id="cx">查询</button>
    <button id="add"  onclick="location.href='add.html'">添加</button>
</center>
    <div align="center">
        <table class="table table-striped  table-bordered table-hover">
            <thead>
                <th>编号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
                <th>电话</th>
                <th>邮箱</th>
                <th>班级</th>
                <th>操作</th>
            </thead>
            <tbody id="mytbody">
                <tr>
                    <td>1</td>
                    <td>阿大</td>
                    <td>男</td>
                    <td>18</td>
                    <td>1888888</td>
                    <td>111@163.com</td>
                    <td>1</td>
                    <td>删除|添加|修改</td>
                </tr>
            </tbody>
        </table>
    </div>
<div align="center">
    <nav aria-label="Page navigation">
        <ul class="pagination" id="myul">
            <li>
                <a href="#" aria-label="Previous">
                    <span aria-hidden="true">&laquo;</span>
                </a>
            </li>
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
            <li>
                <a href="#" aria-label="Next">
                    <span aria-hidden="true">&raquo;</span>
                </a>
            </li>
            <span id="myspan"></span>
        </ul>
    </nav>
</div>

<script>
    $(function(){
        $("tbody tr:odd").addClass("tr_odd");
        $("tbody tr:even").addClass("tr_even");
    });

    $(function () {
        load(1)
    })
function load(currentPage) {
    $.get("/student/show",{currentPage:currentPage},function (pd) {

        var total = pd.total; // 总条数
        var page=pd.pages; //总页数
        $("#myul").html("")
        var first='<li onclick="load(1)"><a href="javascript:void(0)">首页</a></li>'
        var num=pd.pageNum-1;
        if(num<1){
            num=1
        }
        var last='<li onclick="load('+num+')"><a href="javascript:void(0)">上一页</a></li>'

        $("#myul").append(first)
        $("#myul").append(last)
        for (var i = 1; i <= pd.pages; i++) {

                $("#myul").append('<li onclick="load('+i+')"><a href="javascript:void(0)">'+i+'</a></li>')
        }

        var num2=pd.pageNum+1
        if(num2<=pd.pages){
            num2=pd.pages;
        }
        var overleaf='<li onclick="load('+num2+')"><a href="javascript:void(0)">下一页</a></li>'
        var trailer='<li onclick="load('+pd.pages+')"><a href="javascript:void(0)">尾页</a></li>'
        $("#myul").append(overleaf)
        $("#myul").append(trailer)
        var html = $("#myspan").html("当前有"+total+"条,总"+page+"页");
        $("#myul").append(html)
        $("#mytbody").html("")
        for(var i=0;i<pd.list.length;i++){
            debugger
            console.log(pd.list)
            $("#mytbody").append('<tr>\n' +
                '                    <td>'+(i+1)+'</td>\n' +
                '                    <td>'+pd.list[i].name+'</td>\n' +
                '                    <td>'+pd.list[i].gender+'</td>\n' +
                '                    <td>'+pd.list[i].age+'</td>\n' +
                '                    <td>'+pd.list[i].telephone+'</td>\n' +
                '                    <td>'+pd.list[i].email+'</td>\n' +
                '                    <td>'+pd.list[i].classes.cname+'</td>\n' +
                '                    <td><span><a class=\'btn btn-default btn-sm\' href=\'/html/user/userShow.html?uId="+pd.list[i].uId+"\'>查看</a>&nbsp;<a class=\'btn btn-default btn-sm\' href="update.html?id='+pd.list[i].id+'">编辑</a>&nbsp;<a class=\'btn btn-default btn-sm\' href=\'javascript:void(0)\' onclick="dele('+pd.list[i].id+')">删除</a></span></td>\n' +
                '                </tr>')

        }
        window.scrollTo(0,0);
    })

}
function dele(id) {
    alert(id)
    if(confirm("要删除?")){
        $.get("/student/delete",{id:id},function (data) {
            if(data.flag){
                window.location.reload();
            }
        })
    }
}

$("#cx").click(
    function () {
        var datab = $("#ss").val();
        $.get("/student/find",{name:datab},function(pd) {

            var total = pd.total; // 总条数
            var page=pd.pages; //总页数
            $("#myul").html("")
            var first='<li onclick="load(1)"><a href="javascript:void(0)">首页</a></li>'
            var num=pd.pageNum-1;
            if(num<1){
                num=1
            }
            var last='<li onclick="load('+num+')"><a href="javascript:void(0)">上一页</a></li>'

            $("#myul").append(first)
            $("#myul").append(last)
            for (var i = 1; i <= pd.pages; i++) {

                $("#myul").append('<li onclick="load('+i+')"><a href="javascript:void(0)">'+i+'</a></li>')
            }

            var num2=pd.pageNum+1
            if(num2<=pd.pages){
                num2=pd.pages;
            }
            var overleaf='<li onclick="load('+num2+')"><a href="javascript:void(0)">下一页</a></li>'
            var trailer='<li onclick="load('+pd.pages+')"><a href="javascript:void(0)">尾页</a></li>'
            $("#myul").append(overleaf)
            $("#myul").append(trailer)
            var html = $("#myspan").html("当前有"+total+"条,总"+page+"页");
            $("#myul").append(html)
            $("#mytbody").html("")
            for(var i=0;i<pd.list.length;i++){
                debugger
                console.log(pd.list)
                $("#mytbody").append('<tr>\n' +
                    '                    <td>'+(i+1)+'</td>\n' +
                    '                    <td>'+pd.list[i].name+'</td>\n' +
                    '                    <td>'+pd.list[i].gender+'</td>\n' +
                    '                    <td>'+pd.list[i].age+'</td>\n' +
                    '                    <td>'+pd.list[i].telephone+'</td>\n' +
                    '                    <td>'+pd.list[i].email+'</td>\n' +
                    '                    <td>'+pd.list[i].classes.cname+'</td>\n' +
                    '                    <td><span><a class=\'btn btn-default btn-sm\' href=\'/html/user/userShow.html?uId="+pd.list[i].uId+"\'>查看</a>&nbsp;<a class=\'btn btn-default btn-sm\' href=\'/html/user/userUpdate.html?uId="+pd.list[i].uId+"\'>编辑</a>&nbsp;<a class=\'btn btn-default btn-sm\' href=\'javascript:void(0)\' onclick="dele('+pd.list[i].id+')">删除</a></span></td>\n' +
                    '                </tr>')

            }
            window.scrollTo(0,0);
        })
    }
)

</script>
</body>
</html>